<style lang="less" scoped>
    @import '../../styles/common.less';
    .main-table {
        margin-top: 10px;
    }
    .pagination {
        margin-top: 10px;
        padding: 0 10px;
    }
    .conts {
        margin-left: 0px;
        padding-top: 4px;
        text-align: center;
        font-weight: bold;
        font-size: 14px;
        border-bottom: 1px #c5d0dc solid;
    }
</style>

<template>
    <div>
        <Row style="font-size: 15px;">
                排序：<Select v-model="queryCon.order" style="width:8%" filterable clearable>
                        <Option v-for="item in orderList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
            活动名称：<Input v-model="queryCon.activityName" clearable style="width: 15%"></Input>
            活动类型：<Select v-model="queryCon.type" style="width:8%" filterable clearable>
                        <Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                      </Select>

         
     
            <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
        </Row>
        <Row>
            <span @click="showAdd"><Button type="primary" icon="android-add">新增</Button></span>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="data"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList" show-total show-elevator></Page>
        </div>
        <Modal
                v-model="modalVisible"
                title="活动信息"
                @on-ok="modalVisible = false"
                @on-cancel="modalVisible = false"
                width="90%">
            <Form :model="formData" :label-width="90">
                
                <Row>
                    <Col span="16">
                        <FormItem label="等级">
                            <div class="conts">{{formData.gardename}}&nbsp;</div>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="名称">
                            <div class="conts">{{formData.name}}&nbsp;</div>
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="8">
                    <FormItem label="积分值">
                        <div class="conts">{{formData.integral}}&nbsp;</div>
                    </FormItem>
                    </Col>
                    <Col span="8">
                    <FormItem label="标志">
                         <img :src="formData.picture" id="urltp" style="width: 80px;">
                    </FormItem>
                    </Col>
                  
                </Row>

              

               

               
            </Form>
        </Modal>
        <Modal v-model="saveModalVisible" :title="(formData.id ? '修改' : '新增') + '用户'" width="85%">
            <Form :model="formData" :label-width="125">
                <Row>
                    <Col span="8">
                    <FormItem label="等级">
                       
						
						<Select v-model="formData.gradeId" filterable clearable>
                            <Option v-for="item in jf " :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
						
                    </FormItem>

                    </Col>
                    <Col span="8">
                    <FormItem label="名称">
                        <Input v-model="formData.name" clearable ></Input>
                    </FormItem>
                    </Col>
                    <Col span="8">
                    </Col>
                </Row>
                <Row>
                    <Col span="8">
                    <FormItem label="积分值">
                         <Input v-model="formData.integral" clearable ></Input>
                    </FormItem>
                    </Col>
                    <Col span="8">
                    <FormItem label="标志">
                        <Input v-model="formData.picture" clearable ></Input>
                    </FormItem>
                    </Col>
                  
                </Row>
               
              
              
           
          
            </Form>
            <div slot="footer">
                <Button type="primary" @click="userSave">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="saveModalVisible = false">取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import util from '@/libs/util';

    const formStructure = {
        garde: '',
        name: '',
        integral: '',
        picture: '',
    
        id: ''
    };

    export default {
        name: 'exportable-table',
        data () {
            return {
                columns: [{
                    title: '序号',
                    key: 'number',
                    width: 50,
                    align: 'center'
                }, {
                    title: '等级',
                    key: 'gardename'
                }, {
                    title: '名称',
                    key: 'name'
                }, {
                    title: '积分值',
                    key: 'integral'
                },{
                    title: '标志',
                    key: 'picture'
                }, {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.detail(params.row.id);
                                    }
                                }
                            }, '详情'),
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.showEdit(params.row);
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.delete(params.row.id)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }],
                data: [],
                formData: {isIdCard:'NO'},
                modalVisible: false,
                saveModalVisible: false,

                total: 0,
                pageIndex: 1,
                pageSize: 10,
                queryCon:{
                    grade:'',
                    name:'',
                    integral:'',
                    picture:'',
                  
                  
                },
            
                timeList:[]
            };
        },
        mounted() {
            this.loadList();
        },
        methods: {
            loadList() {
                util.ajax.post('busine/integral/grade/list', util.toFormData({
                 page: this.pageIndex,
                 size: this.pageSize,
				
					
                })).then(res => {
				
                    var lists =  res.data.data.pageInfo.list;
					 for(var i=0;i<lists.length;i++){
                       
                      
					    
					    
						if(lists[i].grade)
						lists[i]['gardename']=lists[i].grade.name;
						
					  
                    }
                    
                    this.data = lists;
					
                    this.total = res.data.data.pageInfo.total;
					this.jf = res.data.data.jfgrade;
                
                   
                });
            },
            detail(id) {
                util.ajax.post('busine/integral/grade/detail', util.toFormData({
                    id: id
                })).then(res => {
                    if (res.data.data) {
                        var li = res.data.data;
                        if(li.grade)
                        li["gardename"] = li.grade.name;
                        this.formData = li;

                        this.modalVisible = true;
                    } else {
                        this.$Modal.error({
                            title: '警告',
                            content: '出错了'
                        });
                    }
                });
            },
            showAdd() {
                this.formData = {isIdCard:'NO'};
                this.saveModalVisible = true;
            },
            showEdit(obj) {
                this.formData = {};
                for (let key in formStructure) {
                    this.formData[key] = obj[key];
                }
                this.saveModalVisible = true;
            },
            userSave(){
                let formData = {};
                for (let key in this.formData) {
                    formData[key] = this.formData[key];
                }
                util.ajax.post('busine/integral/grade/save', util.toFormData(formData)).then(res => {
                    if (res.data.message === 'SUCCESS') {
                        this.saveModalVisible = false;
                        this.$Message.success('保存成功！');
                        this.pageIndex = 1;
                        this.loadList();
                    } else {
                        this.$Message.warning(res.data.message || '未知错误！');
                    }
                });
            },
            delete(id) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确定删除？</p>',
                    onOk: () => {
                        util.ajax.post('busine/integral/grade/delete', util.toFormData({
                            id: id
                        })).then(res =>{
                            if(res.data.message === 'SUCCESS'){
                                this.$Message.success('删除成功！');
                                this.loadList();
                            }
                        });
                    },
                    onCancel: () => {
                    }
                });
            },
            getDate(data){
                let myDate;

                if(data){
                    myDate = new Date(data);
                }else{
                    myDate = new Date();
                }

                let Y = myDate.getFullYear(),
                    M = myDate.getMonth() + 1,
                    D = myDate.getDate() + 1,
                    H = myDate.getHours(),
                    Min = myDate.getMinutes(),
                    S = myDate.getSeconds();

                if(M < 10){
                    M = '0' + M ;
                }
                if(D < 10){
                    D = '0' + D ;
                }
                if(H < 10){
                    H = '0' + H ;
                }
                if(Min < 10){
                    Min = '0' + Min ;
                }
                if(S < 10){
                    S = '0' + S ;
                }
                return Y + '-' + M + '-' + D;
            },
            addTime(){
                this.timeList++
            },
            delTime(){
                this.timeList--
            }
        }
    };
</script>
